<template>
  <div class="pro_list">
    <van-swipe-cell :disabled="!isSlide">
      <div class="pro_item">
        <div class="pro_checkbox" v-if="isHasCheckbox">
            <van-checkbox v-model="proData.checked" @change="simpleSelect(proData.checked)"></van-checkbox>
        </div>
        <div class="pro_img"><img :src="proData.small_img" alt=""></div>
        <div class="pro_box">
          <div class="pro_name">
            <div class="pro_name_chinese">
              <span class="pro_name_big">{{proData.name}}</span>
              <span class="pro_name_sm">{{proData.rule}}</span>
            </div>
            <div class="pro_name_enname">{{proData.enname}}</div>
          </div>
          <div class="pro_price">
            <div class="pro_price_left">&yen;{{proData.price}}</div>
            <div class="pro_price_right">
              <slot>
           
              </slot>
            </div>
          </div>
        </div>
      </div>
      <template #right>
        <van-button @click="remove" square type="danger" text="删除" />
      </template>
    </van-swipe-cell>
  </div>
</template>

<script>
export default {
  name: "ProList",
  props:{
    proData:{
      type:Object,
      default(){
        return {}
      }
    },

    // 控制右边滑动删除的滑块需不需要滑动
    isSlide:{
      type:Boolean,
      default:false
    },

    // 是否显示复选框
    isHasCheckbox:{
      type:Boolean,
      default:true
    }
  },

  data() {
    return {
      checked: false,
    }
  },
  methods:{
    // 单选的状态值
    simpleSelect(checkbox){
      // 
      this.$emit("simpleSelect",{checkbox})
    },

    // 删除商品
    remove(){
      this.$emit("remove",)
    }
  }
};
</script>

<style lang="less" scoped>
.pro_list {
  padding: 10px;
  background-color: #fff;
  .pro_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .pro_checkbox {
      margin-right: 10px;
    }
    .pro_img {
      width: 70px;
      height: 70px;
      margin-right: 10px;
      background: #ccc;
      img{
        width: 100%;
      }
    }
    .pro_box {
      flex: 1;
      //   background: chocolate;
      height: 70px;
      span {
        display: inline-block;
      }
      .pro_name {
        height: 70%;
      }
      .pro_name_big {
        font-size: 14px;
        margin-right: 10px;
        color: #555;
      }
      .pro_name_sm,
      .pro_name_enname {
        color: #888;
      }
      .pro_price {
        display: flex;
        justify-content: space-between;
        .pro_price_left {
          font-weight: bold;
          color: #e4393c;
          font-size: 14px;
        }
      }
    }

    .pro_price_right{
      margin-right: 10px;
    }

    /deep/ .van-stepper--round .van-stepper__plus {
      background: blue;
    }
    /deep/ .van-stepper--round .van-stepper__minus {
      color: blue;
      background-color: #fff;
      border: 0.02667rem solid blue;
    }
  }

  // 修改 右边删除滑块的样式
 /deep/ .van-button--normal{
   height: 100%;
 }
}
</style>